<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<body>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");

/*
context 对象可以设置以下 text 属性：
font：文字字体，同 CSS font-family 属性
textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.
textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic.
有两个方法可以绘制文字： fillText 和 strokeText。第一个绘制带 fillStyle 填充的文字，后者绘制只有 strokeStyle 边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。
文字对齐属性影响文字与设置的
(x,y) 坐标的相对位置。
*/

context.fillStyle    = '#00f';  
context.font         = 'italic 30px sans-serif';  
context.textBaseline = 'top';  
context.fillText  ('Hello world!', 0, 0);  
context.font         = 'bold 30px sans-serif';  
context.strokeText('Hello world!', 0, 50);  

/*
目前只有 Konqueror 和 Firefox 3.1 nightly build 支持 Shadows API 。API 的属性为：
shadowColor：阴影颜色。其值和 CSS 颜色值一致。
shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。
shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。
*/
context.shadowOffsetX = 5;  
context.shadowOffsetY = 5;  
context.shadowBlur    = 4;  
context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
context.fillStyle     = '#00f';  
context.fillRect(0, 100, 100, 100); 



 
</script>
</body>
</html>